<template>
  <BasicModal v-bind="$attrs" @register="register" showFooter :width="width" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm" class="menuForm" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, useAttrs } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { copyMenuFormSchema } from './menu.data';
import {BasicModal, useModalInner} from '/@/components/Modal';
import { copyMenu } from './menu.api';
import { useAdapt } from '/@/hooks/system/useAutoAdapt.ts';
import { useMessage } from '/@/hooks/web/useMessage';
import { listScene } from "/@/api/sys/scene";
const { createMessage } = useMessage();
// 声明Emits
const emit = defineEmits(['success', 'register']);
const name = ref('')
const { width } = useAdapt();
const [registerForm, {resetFields, validate, setFieldsValue, updateSchema }] = useForm({
  schemas: copyMenuFormSchema,
  showActionButtonGroup: false
});

const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  await resetFields()
  name.value = data.record.name
  setFieldsValue({ id: data.record.id})

  updateSchema([
    {
      field: 'sceneId',
      componentProps: {
        optionFilterProp: "label",
        showSearch: true,
        api: listScene
      },
    },
  ])

  setModalProps({ confirmLoading: false });
});

const getTitle = computed(() => '复制菜单 ' + name.value);
async function handleSubmit() {
  try {
    const values = await validate()
    console.log("submit menu: ", values);

    setModalProps({ confirmLoading: true });
    await copyMenu(values, () => {
      createMessage.success(`${getTitle.value} 成功`)
    })

    closeModal();
    emit('success');
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

